<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--秒杀详情页</title>
	<link rel="icon" href="/assets/img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="/css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-item.css"/>
	<link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-seckill-item.css" />
	<link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />
</head>
<body>
<div id="seckillApp">
	<!-- 头部栏位 -->
	<div id="nav-bottom">
		<ly-top/>
	</div>
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">

				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom"><img :jqimg="seckillgoods.skuPic" :src="seckillgoods.skuPic" /></span>
						</div>
					</div>

				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4>{{seckillgoods.title}}</h4>
					</div>
					<div class="news">
						<span><img src="/img/_/clock.png"/>优品秒杀</span>
						<span class="overtime" >{{timedesc}}{{showtime}}</span>
					</div>
					<div class="summary">
						<div class="summary-wrap">

							<div class="fl title">
								<i>秒杀价</i>
							</div>
							<div class="fl price">
								<i>¥</i>
								<em>{{ly.formatPrice(seckillgoods.costPrice)}}</em>
								<span>原价：{{ly.formatPrice(seckillgoods.oldPrice)}}</span>
							</div>
							<div class="fr remark">

							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<!--<i class="red-bg">加价购</i>-->
								<em class="t-gray">{{seckillgoods.subTitle}}</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">


						<div class="summary-wrap">
							<div class="fl title">

							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a href="#" :disabled="enable" @click.prevent="toOrderInfo" target="_blank" class="sui-btn  btn-danger addshopcar">立即抢购</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<div class="shop">
						<span class="fl">三星旗舰店</span><span class="fr"><a href="shop.html" target="_blank" class="sui-btn btn-bordered btn-danger">进入店铺</a></span>
					</div>
					<div class="clearfix"></div>
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">

					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<div class="intro-detail">
									<div th:utext="${detail.description}"></div>
								</div>
							</div>
							<div id="two" class="tab-pane">
								<div class="Ptable">
									<div class="Ptable-item" v-for="group in specGroups" :key="group.id">
										<h3 v-text="group.name"></h3>
										<dl>
										<span v-for="param in group.params" :key="param.id">
											<dt v-text="param.name"></dt><dd v-text="param.value + (param.unit || '')"></dd>
										</span>
										</dl>
									</div>
								</div>
								<div class="package-list">
									<h3>包装清单</h3>
									<p th:text="${detail.packingList}">手机X1、快速指南X1、华为SuperCharge 充电器X1、三包凭证X1、Type-C
										数字耳机X1、Type-C 数据线X1、取卡针X1、TPU保护壳X1、USB Type-C转3.5mm耳机转接线X1（备注：最终以实物为准）</p>
								</div>

							</div>
							<div id="three" class="tab-pane">
								<p th:text="${detail.afterService}">售后保障</p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>


<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("/foot.html");</script>
<!--页面底部END-->

<!--侧栏面板开始,由js动态加载-->
<div class="J-global-toolbar"></div>
<script type="text/javascript">$(".J-global-toolbar").load("/side.html");</script>

<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
	<div class="tbar-cart-item" >
		<div class="jtc-item-promo">
			<em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
			<div class="promo-text">已购满600元，您可领赠品</div>
		</div>
		<div class="jtc-item-goods">
			<span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50" /></a></span>
			<div class="p-name">
				<a href="#">{1}</a>
			</div>
			<div class="p-price"><strong>¥{3}</strong>×{4} </div>
			<a href="#none" class="p-del J-del">删除</a>
		</div>
	</div>
</script>
<!--侧栏面板结束-->
<script th:inline="javascript">
	const specialSpec = JSON.parse(/*[[${detail.specialSpec}]]*/ "");
	const genericSpec = JSON.parse(/*[[${detail.genericSpec}]]*/ "");
	const seckillgoods = /*[[${seckillgoods}]]*/{};
	const specs = /*[[${specs}]]*/ [];
	const params = {};
	specs.forEach(group => {
		group.params.forEach(param => {
			params[param.id] = param.name;
	})
	});
</script>
<script>
	var itemVm = new Vue({
		el: "#seckillApp",
		data: {
			ly,
			specialSpec,// 特有规格参数模板
			params,// 参数对象数组
			seckillgoods,
			lytime:"",//当前时间
			showtime:"",
			timedesc:"",
			enable:true,
			num:0

		},
		mounted(){
			//获取服务端时间 同步
			 this.getLyTime();
		},
		methods: {
			async getLyTime(){
				//获取服务端的时间
		await ly.http.get("/seckill/portal/time").then(resp => {
					// 服务端的时间
			     this.lytime = resp.data;
				//时间戳比较
		       const nowtime=Date.parse(this.lytime);
				const startTime=Date.parse(this.seckillgoods.beginTime);
				const endTime=Date.parse(this.seckillgoods.endTime);
				var timestmap = 0;
				//进行比较
				if(nowtime < startTime){
					//如果还没有开始
					this.timedesc = "距离开始:"
					timestmap = startTime - nowtime;
				}else if(nowtime < endTime ){
					this.enable = false;
					this.timedesc = "距离结束:"
					timestmap = endTime - nowtime;
				}else if(nowtime >= endTime){
					this.enable = true;
					this.timedesc = "已结束"
					this.showtime = "";
				}
				if(timestmap >0){
					console.info(timestmap);
					this.timeCalculate(timestmap);
				}
				});
			},
			getNum(){
				ly.http.get("/seckill/portal/"+this.seckillgoods.id).then(resp => {
					console.info(resp.data);
					if(resp.data<1){
						this.enable = true;
					}
					this.num = resp.data;
				});
			},
			//秒杀活动倒计时
			timeCalculate(timeremain) {
				//每秒钟执行1次
				let clock = window.setInterval(() => {
					//时间递减
					timeremain=timeremain-1000;
				//将剩余时间转换成天、时、分、秒
				//app.startTime = this.timedown(timeremain);
				this.showtime = this.timedown(timeremain);
				//如果times<=0 则取消定时任务
				if(timeremain<=0){

					window.clearInterval(clock);
					this.getLyTime();
				}
			},1000)
			},
			//将毫秒转换成天时分秒
			timedown(num) {
				var oneSecond = 1000;
				var oneMinute=oneSecond*60;
				var oneHour=oneMinute*60
				var oneDay=oneHour*24;
				//天数
				var days =Math.floor(num/oneDay);
				//小时
				var hours =Math.floor((num%oneDay)/oneHour);
				//分钟
				var minutes=Math.floor((num%oneHour)/oneMinute);
				//秒
				var seconds=Math.floor((num%oneMinute)/oneSecond);
				//拼接时间格式
				var str = days+'天'+hours+'时'+minutes+'分'+seconds+'秒';
				//console.info(str);
				return str;
			},
			toOrderInfo() {
				if(this.enable){
					alert("抢购已经结束！");
					return false;
				}
				if (!this.seckillgoods) {
					alert("系统忙，请稍后重试！");
					return;
				}
				ly.store.set("seckillgoods", this.seckillgoods);
				ly.http.get("/auth/verify").then(() => {
					// 商品保存到localStorage
					window.location.href = "/getSecKillOrderInfo.html";
			}).catch(() => {
					alert("您还没有登录，点击【确定】马上跳转到登录页面！");
				// 未登录则跳转到登录页
				window.location.href = "/login.html?returnUrl=" + window.location.href;
			})
			}
		},
		computed: {
			specGroups() {
				// 获取特有规格参数值
				specs.forEach(group => {
					group.params.forEach(param => {
				if (param.generic) {
					param.value = genericSpec[param.id];
				} else {
					param.value = specialSpec[param.id];
				}
			})
			})
				return specs;
			},
		},
		components: {
			lyTop: () => import('/js/pages/top.js')
	}
	});
</script>
<script type="text/javascript">
	$(function(){
		$("#service").hover(function(){
			$(".service").show();
		},function(){
			$(".service").hide();
		});
		$("#shopcar").hover(function(){
			$("#shopcarlist").show();
		},function(){
			$("#shopcarlist").hide();
		});

	})
</script>
<script type="text/javascript" src="/js/widget/cartPanelView.js"></script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/czFunction.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript">
	$(function(){
		$("ul.btn-choose li a.btn-xlarge").click(function(){
			alert("钻中");
		});
		$("#star").click(function(){
			alert("关注成功");
		})
	})
</script>
</body>
</html>